import { leverageAssets, leverageTable } from '@/data/mockData'


let leverageApp = null

export function leverageFunds() {
    const originalContract = document.querySelector(
        ".mantine-1qlxz9s > .mantine-1jby9qm"
    ) || document.querySelector('.mantine-1qlxz9s > .mantine-16z6d2t')
    if (!originalContract) {
        console.log('未找到.mantine-1qlxz9s > .mantine-1jby9qm或.mantine-1qlxz9s > .mantine-16z6d2t', originalContract);
    }
    originalContract.innerHTML = `${(leverageAssets.warehouseAssets).toFixed(2)} USD`
    const originContractAbout = document.querySelector(
        ".mantine-1qlxz9s > .mantine-jehip2"
    ) || document.querySelector('.mantine-1qlxz9s > .mantine-19ps2g0')
    if (!originContractAbout) {
        console.log('未找到.mantine-1qlxz9s > .mantine-jehip2或.mantine-1qlxz9s > .mantine-19ps2g0', originContractAbout);

    }
    originContractAbout.innerHTML = `${(leverageAssets.warehouseAssetsBTC).toFixed(2)} BTC`
}

import { ref,createApp } from "vue";
import AccountTable from "@/content-scripts/components/fund/AccountTable.vue";
import { leverageColumns } from "@/content-scripts/components/fund/accountColumns.js";
import Antd from "ant-design-vue";

export function leverageFundTable(params = {}) {
    const container = document.querySelector(".mantine-xlwgkm");
    // 请求接口，获取数据
    // params是修改的数据
    let tableSource = ref([])
    let tableColumns = ref([])
    /**
     * accountAssets        账户资产
     * currentLiabilities   当前负债 
     * debtDetails          负债明细
     */
    if(params.type == 'accountAssets'){
        tableSource = leverageTable
        tableColumns = leverageColumns
    }
    console.log(params);
    console.log(container, "contaainer");


    if (!container) {
        console.log('未找到.mantine-xlwgkm，表格区域');

        return
    }

    const existingOverlay = container.querySelector(".my-leverage-table-overlay");
    if (existingOverlay) {
        existingOverlay.remove();
    }

    const overlay = document.createElement("div");
    overlay.setAttribute("class", "my-leverage-table-overlay");
    overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        " left: 0;\n" +
        " top: 0;\n" +
        " width: 100%;\n" +
        " height: 100%;\n" +
        " z-index: 10;\n"
    );

    const tableStyle = {
        // fontSize: "12px",
        color: "#8e949e",
        background: "#F8F9FB",
    };

    // 挂载元素
    const appContainer = document.createElement("div");

    leverageApp = createApp(AccountTable); // 创建 Vue 应用
    leverageApp.provide("tableSource", tableSource); // 提供响应式数据
    leverageApp.provide("tableColumns", tableColumns); // 提供响应式数据
    leverageApp.provide("tableStyle", tableStyle); // 提供响应式数据
    leverageApp.use(Antd);
    leverageApp.mount(appContainer); // 将 Vue 应用挂载到子元素上
    console.log("AccountTable");

    container.style.position = "relative";
    overlay.appendChild(appContainer); // 将子元素添加到 overlay 中
    container.appendChild(overlay); // 将 overlay 添加到 container 中
}